<template>
  <div class="page_content daraBoardStreetAnalysis_content">
    <div class="header_box p-10 bold flex flex-ac flex-jsb">
      <div class="title bold">卫生状况</div>
      <div class="dots flex flex-c flex-jc flex-ac">
        <span>.</span>
        <span>.</span>
        <span>.</span>
      </div>
    </div>
    <div class="main_box m-10 grid">
      <div ref="mainEchart" class="main_echart"></div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {
  ref,
  computed,
  watch,
  onMounted,
  onBeforeUnmount,
  reactive,
  shallowRef,
  onUnmounted,
} from "vue";
import * as echarts from "echarts";

const props: any = defineProps({});
const mainEchart = ref<any>(null);
const myChart = shallowRef();
onMounted(() => {
  myChart.value = echarts.init(mainEchart.value);
  chartInit();
  window.addEventListener("resize", handleResize);
});

onBeforeUnmount(() => { });
onUnmounted(() => {
  window.removeEventListener("resize", handleResize);
});
const chartInit = () => {
  let color = ["#FF8700", "#ffc300", "#00e473", "#009DFF"];
  // 绘制图表
  myChart.value.setOption({
    tooltip: {
      trigger: "item",
      show: false
    },
    legend: {
      bottom: "0.2%",
      left: "center",
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: ["50%", "70%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 4,
          borderColor: "#fff",
          borderWidth: 1,
        },
        label: {
          show: true,
          position: "center",
          formatter: "{d}%\n{b}",
          fontSize: 20,
          color: "#1d60ad", //文字的颜色
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 22,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 1048, name: "优秀" },
          { value: 735, name: "良好" },
          { value: 580, name: "合格" },
        ],
      },
    ],
  });
  const hideLabel = (e: any) => {
    myChart.value.setOption({
      series: {
        label: {
          show: false,
        },
      },
    });
  };
  const showLabel = (e: any) => {
    myChart.value.setOption({
      series: {
        label: {
          show: true,
        },
      },
    });
  };
  myChart.value.on("highlight", hideLabel);
  myChart.value.on("mouseover", hideLabel);
  myChart.value.on("mouseout", showLabel);
  myChart.value.on("downplay", showLabel);
};

const handleResize = () => {
  if (myChart.value) {
    // 调用Echarts实例的resize方法，重新绘制图表
    myChart.value.resize();
  }
};
</script>

<style lang="scss" scoped>
.daraBoardStreetAnalysis_content {
  height: 320px;

  .header_title {
    height: 40px;
    background: linear-gradient(to right, rgb(216, 242, 252), #ffffff);

    .icon {
      width: 26px;
      height: 26px;

      .img {
        width: 100%;
        height: 100%;
      }
    }

    .title {
      font-size: 16px;
      font-weight: 550;
      color: #333333;
    }
  }

  .main_box {
    .main_echart {
      width: 100%;
      height: calc(320px - 40px);
    }
  }
}
</style>